<template>
	<view class="container position-relative">
		<view style="margin-bottom: 130rpx;">
			<view class="section-1">
				<template v-if="orderType == 'takein'">
					<list-cell class="location" :hover="false">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="store-name flex-fill">
								{{ store.name }}
								
							</view>
							<view class="uni-list-cell-db">
								{{ store.distance_text }}
							</view>
							<!-- <image src="/static/images/navigator-1.png" class="arrow"></image> -->
						</view>
					</list-cell>
				</template>
				<template v-else>
					<list-cell @click="chooseAddress">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center justify-content-between mb-10">
								<view class="font-size-extra-lg text-color-base">{{ address.street }}</view>
								<image src="/static/images/navigator-1.png" class="arrow"></image>
							</view>
							<view class="d-flex text-color-assist font-size-sm align-items-center">
								<view class="mr-10">{{ address.accept_name }}</view>
								<view class="mr-10">{{ !address.sex ? '先生' : '女士' }}</view>
								<view>{{ address.mobile }}</view>
							</view>
						</view>
					</list-cell>
				</template>
				<template v-if="orderType == 'takein'">
					<list-cell arrow class="meal-time" :hover="false">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="title">取餐时间</view>
							<!-- <view class="time">立即用餐</view> -->
							<!-- <view class="uni-list"> -->
								<!-- <view class="uni-list-cell"> -->
									<!-- <view class="uni-list-cell-left">
										当前选择
									</view> -->
									<view class="uni-list-cell-db">
										<picker mode="time" :value="time" :start="now_time" end="19:00" @change="bindTimeChange">
											<view class="uni-input">{{time}}</view>
										</picker>
									</view>
								<!-- </view> -->
							<!-- </view> -->
						</view>
					</list-cell>
					<list-cell class="contact" last :hover="false">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="title flex-fill">手机号</view>
							<view class="time">
								<input class="text-center" placeholder="请输入手机号码" :value="phone" disabled="true" @tap="phoneTip()"/>
							</view>
						</view>
						<button type="primary" size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取</button> 
					</list-cell>
				</template>
				<template v-else>
					<list-cell :hover="false">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center font-size-base text-color-base">
								<view class="flex-fill">预计送达时间</view>
								<view class="mr-10">{{send_time}}</view>
								<image src="/static/images/navigator-1.png" class="arrow"></image>
							</view>
							<view class="font-size-base text-color-primary">
								特殊时期减少接触，请修改下方订单备注
							</view>
						</view>
					</list-cell>
				</template>
			</view>
			<!-- 购物车列表 begin -->
			<view class="section-2">
				<view class="cart d-flex flex-column">
					<list-cell last v-for="(item, index) in cart" :key="index" :hover="false">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center mb-10">
								<view class="name-and-props overflow-hidden">
									<view class="text-color-base font-size-lg">
										{{ item.name }}
									</view>
								</view>
								<view class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg">
									<view>x{{ item.number }}</view>
									<view>￥{{ item.price }}</view>
								</view>
							</view>
							<view class="text-truncate font-size-base text-color-assist" v-if="item.props_text">
								{{ item.props_text }}
							</view>
						</view>
					</list-cell>
					<!-- <template v-if="orderType == 'takeout'">
						<list-cell last v-if="store.packing_fee > 0">
							<view class="w-100 d-flex font-size-base align-items-center justify-content-between">
								<view>包装费</view>
								<view>￥{{ parseFloat(store.packing_fee) }}</view>
							</view>
						</list-cell>
						<list-cell last v-if="store.delivery_cost > 0">
							<view class="w-100 d-flex font-size-base align-items-center justify-content-between">
								<view>配送费</view>
								<view>￥{{ parseFloat(store.delivery_cost) }}</view>
							</view>
						</list-cell>
					</template> -->
				</view>
				<list-cell arrow :hover="false">
					<view class="flex-fill d-flex justify-content-between align-items-center">
						<view class="text-color-base">优惠券</view>
						<view class="text-color-primary"  @click="goToPackages(total)">{{coupon_title}}</view>
					</view>
				</list-cell>
				<!-- <list-cell arrow>
					<view class="flex-fill d-flex justify-content-between align-items-center">
						<view class="text-color-base">礼品卡</view>
						<view class="text-color-primary">请选择</view>
					</view>
				</list-cell> -->
				<list-cell last>
					<view class="flex-fill d-flex justify-content-end align-items-center">
						<view>总计￥{{ total }},实付</view>
						<view class="font-size-extra-lg font-weight-bold">￥{{ amount }}</view>
					</view>
				</list-cell>
			</view>
			<!-- 购物车列表 end -->
			<view class="d-flex align-items-center justify-content-start font-size-sm text-color-warning" 
				style="padding: 20rpx 0;">
				<!-- <view class="iconfont iconhelp line-height-100"></view>
				<view>优惠券不与满赠、满减活动共享</view> -->
			</view>
			<!-- 支付方式 begin -->
			<view class="payment">
				<list-cell last :hover="false">
					<text>支付方式</text>
				</list-cell>
				<list-cell :hover="false">
					<view class="d-flex align-items-center justify-content-between w-100 disabled">
						<view class="iconfont iconbalance line-height-100 payment-icon"></view>
						<view class="flex-fill">余额支付（余额￥{{  isLogin ? member.balance : 0 }}）</view>
						<view class="font-size-sm" v-if="parseFloat(member.balance) < parseFloat(amount)" @click="payBalance">余额不足，去充值</view>
						<view :class="pay_type_balance" @click="pay_type(1)" v-if="parseFloat(member.balance) > parseFloat(amount)"></view>
					</view>
				</list-cell>
				<list-cell last :hover="false">
					<view class="d-flex align-items-center justify-content-between w-100">
						<view class="iconfont iconwxpay line-height-100 payment-icon" style="color: #7EB73A;"></view>
						<view class="flex-fill">微信支付</view>
						<view :class="pay_type_wx" @click="pay_type(2)"></view>
					</view>
				</list-cell>
			</view>
			<!-- 支付方式 end -->
			<!-- 备注 begin -->
			<list-cell arrow last @click="goToRemark">
				<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0 mr-20">备注</view>
					<view class="text-color-primary flex-fill text-truncate text-right">{{ form.remark || '点击填写备注' }}</view>
				</view>
			</list-cell>
			<!-- 备注 end -->
		</view>
		<!-- 付款栏 begin -->
		<view class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
			<view class="font-size-sm" style="margin-left: 20rpx;">合计：</view>
			<view class="font-size-lg flex-fill">￥{{ amount }}</view>
			<view class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
				style="padding: 0 60rpx;" @tap="submit">
				付款
			</view>
		</view>
		<!-- 付款栏 end -->
		<modal :show="ensureAddressModalVisible" custom :mask-closable="false" :radius="radius" width="90%">
			<view class="modal-content">
				<view class="d-flex justify-content-end">
					<image src="/static/images/pay/close.png" style="width: 40rpx; height: 40rpx;" @tap="ensureAddressModalVisible=false"></image>
				</view>
				<view class="d-flex just-content-center align-items-center" style="margin-bottom: 40px;">
					<view class="font-size-extra-lg text-color-base">请再次确认下单地址</view>
				</view>
				<view class="d-flex font-size-base text-color-base font-weight-bold align-items-center justify-content-between mb-20">
					<view>{{ address.accept_name }} {{ address.sex ? '女士' : '先生' }}</view>
					<view>{{ address.mobile }}</view>
				</view>
				<view class="d-flex font-size-sm text-color-assist align-items-center justify-content-between mb-40">
					<view>{{ address.street + address.door_number }}</view>
					<!-- <button type="primary" size="mini" plain class="change-address-btn">修改地址</button> -->
				</view>
				<button type="primary" class="pay_btn" @tap="pay">确认并付款</button>
			</view>
		</modal>
		<key-words :mix="true" :show_key="show_key" :price="amount" @closeFuc="closeFuc" @getPassword="getPassword"></key-words>
	</view>
</template>

<script>
	import {mapState, mapMutations,mapGetters} from 'vuex'
	import listCell from '@/components/list-cell/list-cell'
	import modal from '@/components/modal/modal'
	import orders from '@/api/orders'
	import keyWords from "@/components/bian-keywords/index.vue"
	
	export default {
		components: {
			listCell,
			modal,
			keyWords
		},
		data() {
			return {
				cart: [],
				form: {
					remark: ''
				},
				ensureAddressModalVisible: false,
				phone:'',
				time: '',
				now_time:'',
				coupon_id:0,
				coupon_title:'使用',
				send_time:'',
				radius:'0',
				coupon_price:0,
				pay_type_balance:'iconfont iconradio-button-off line-height-100 checkbox',
				pay_type_wx:'iconfont iconradio-button-on line-height-100 checkbox checked',
				payType:2,
				show_key:false
			}
		},
		computed: {
			...mapState(['orderType', 'address', 'store','member']),
			...mapGetters(['isLogin']),
			total() {
				return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
			},
			amount() {
				return (this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0) - (this.coupon_price)).toFixed(2)
			}
		},
		onLoad(option) {
			// console.log(option)
			const {remark} = option
			this.cart = uni.getStorageSync('cart')
			remark && this.$set(this.form, 'remark', remark)
			this.getTime()
			let mobile = uni.getStorageSync('getPhoneNumber')
			if(mobile){
				this.phone = mobile
			}
			if(option.coupon_id){
				this.coupon_id = option.coupon_id
			}
			if(option.coupon_title){
				this.coupon_title = option.coupon_title
			}
			if(option.coupon_type == 1 && option.coupon_price){
				this.coupon_price = option.coupon_price
			}
		},
		methods: {
			...mapMutations(['SET_ORDER']),
			goToRemark() {
				uni.navigateTo({
					url: '/pages/remark/remark?remark=' + this.form.remark
				})
			},
			chooseAddress() {
				uni.navigateTo({
					url: '/pages/address/address?is_choose=true&scene=pay'
				})
			},
			goToPackages(amount) {
				// console.log(amount)
				uni.navigateTo({
					url: '/pages/coupons/coupons?amount='+amount
				})
			},
			submit() {
				if(this.orderType == 'takeout') {
					this.ensureAddressModalVisible = true
				} else {
					this.pay()
				}
			},
			pay() {
				if(!this.ensureAddressModalVisible && !this.phone){
					return uni.showToast({
						title:'请获取手机号',
						icon:'none'
					})
				}
				// 订阅消息
				uni.requestSubscribeMessage({
				  tmplIds: ['EV-8FztHAWajo5G9URKWjxOtFP97v2tj58qiVHt5nyk'],
				  success (res) { 
					  console.log(res)
				  }
				})
				// uni.showLoading({title: '加载中'})
				// let order = this.orderType == 'takein' ? orders[0] : orders[1]
				// order = Object.assign(order, {status: 1})
				// this.SET_ORDER(order)
				// console.log(this.orderType,this.time,this.send_time,this.phone,this.coupon_id,this.cart,this.form,this.address)
				
				// return false
				//提交订单
				if(this.payType == 1){
					this.show_key = true
				}
				if(this.payType == 2){
					//微信支付
					this.$http.post('/pay/pay', {orderType:this.orderType,time:this.time,send_time:this.send_time,phone:this.phone,user_coupon_id:this.coupon_id,cart:this.cart,remark:this.form.remark,address:this.address,payType:this.payType}).then(res => {
						let result = res.data.data //接口返回数据
							// console.log(res)
						// console.log(reson.provider[0])
						uni.showLoading({}) //拉起支付加载提示
						if (res.data.code == 1) {
							uni.hideLoading()
							uni.requestPayment({
								provider: result.provider,
								timeStamp: result.timeStamp,
								nonceStr: result.nonceStr,
								package: result.package,
								signType:  result.signType,
								paySign:  result.paySign,
								success: () => {
									uni.removeStorageSync('cart')
									uni.hideLoading()
									uni.reLaunch({
										url: '/pages/take-foods/take-foods'
									})
								},
								fail: function (err) {
									// uni.switchTab({
									// 	url:'/pages/mine/mine'
									// })
									// console.log('fail:' + JSON.stringify(err));
								},complete(res) {
									// console.log('complete:' + JSON.stringify(res));
								}
							});
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
						// console.log(res.data.data)
						// uni.hideLoading()
					}).catch(err => {
					
					})
				}
				// return false
				// uni.removeStorageSync('cart')
				// uni.reLaunch({
				// 	url: '/pages/take-foods/take-foods'
				// })
				// uni.hideLoading()
			},
			getPhoneNumber(e) {
				let mobile = uni.getStorageSync('getPhoneNumber')
				if(mobile){
					this.phone = mobile
				}else{
					uni.login({
						success: (e) => {
							this.$http.post('/wx/getPhoneNumber', {code:e.code,iv:this.iv,encryptedData:this.encryptedData}).then(res => {
								// console.log(res.data.data.phoneNumber)
								this.phone = res.data.data.phoneNumber
								uni.setStorageSync('getPhoneNumber',this.phone)
							}).catch(err => {
							
							})
						}
					})
				}
				if(e.detail.errMsg == 'getPhoneNumber:ok'){
					this.iv = e.detail.iv
					this.encryptedData = e.detail.encryptedData
				}else{
					this.phone = ''
				}
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			getTime:function(){
				var date = new Date(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				this.time = hour+':'+minute
				this.now_time = hour+':'+minute
				this.send_time = '20分钟'
			},
			pay_type(type){
				if(type == 1){
					this.pay_type_wx = 'iconfont iconradio-button-off line-height-100 checkbox'
					this.pay_type_balance = 'iconfont iconradio-button-on line-height-100 checkbox checked'
				}
				if(type == 2){
					this.pay_type_balance = 'iconfont iconradio-button-off line-height-100 checkbox'
					this.pay_type_wx = 'iconfont iconradio-button-on line-height-100 checkbox checked'
				}
				
				this.payType = type
			},
			getPassword (msg) {
				//请求密码验证
				this.$http.post('/user/payPass', {pay_pass:msg.password}).then(res => {
					if(res.data.code != 1){
						return uni.showModal({
							title: '支付密码错误请重试',
							cancelText:'忘记密码',
							confirmText:'重试',
							success: ({confirm}) =>  {
								console.log(confirm);
								if (confirm) {
									console.log('用户点击确定');
								} else  {
									uni.navigateTo({
										url:'/pages/mine/userinfo'
									})
								}
							},
							fail:()=>{
								uni.showToast({
									title:'网络错误',
									icon:'none'
								})
							}
						})
					}else{
						uni.showLoading({title: '支付中'})
						// 密码正确
						//余额支付
						this.$http.post('/pay/pay', {orderType:this.orderType,time:this.time,send_time:this.send_time,phone:this.phone,user_coupon_id:this.coupon_id,cart:this.cart,remark:this.form.remark,address:this.address,payType:this.payType}).then(res => {
							if (res.data.code == 0) {
								this.show_key = false
								return uni.showToast({
									title:res.data.msg,
									icon:'none'
								})
							}
							// console.log(res.data.data)
							uni.removeStorageSync('cart')
							uni.hideLoading()
							uni.reLaunch({
								url: '/pages/take-foods/take-foods'
							})
							// uni.hideLoading()
						}).catch(err => {
						
						})
					}
				}).catch(err => {
				
				})
				// console.log(msg)
			},
			closeFuc () {
			    this.show_key = false;
			},
			payBalance(){
				uni.navigateTo({
				    url: '/pages/balance/balance'
				});
			},
			phoneTip(){
				if(!this.phone){
					uni.showToast({
						icon:'none',
						title:'请获取手机号'
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	 // @import url("./components/bian-keywords/static/iconfont/iconfont.css");
	.container {
		padding: 30rpx;
	}
	
	.arrow {
		width: 50rpx; 
		height: 50rpx;
		position: relative;
		margin-right: -10rpx;
	}
	
	.location {
		.store-name {
			font-size: $font-size-lg;
		}
		
		.iconfont {
			font-size: 50rpx;
			line-height: 100%;
			color: $color-primary;
		}
	}
	
	.section-1 {
		margin-bottom: 30rpx;
		.contact {
			.contact-tip {
				margin-left: 10rpx;
				border: 2rpx solid $color-primary;
				padding: 6rpx 10rpx;
				color: $color-primary;
			}
		}
	}
	
	.section-2 {
		.name-and-props {
			width: 65%;
		}
	}
	
	.payment {
		margin-bottom: 30rpx;
		
		.disabled {
			color: $text-color-grey;
		}
		
		.payment-icon {
			font-size: 44rpx; 
			margin-right: 10rpx;
		}
		
		.checkbox {
			font-size: 36rpx;
			margin-left: 10rpx;
		}
		
		.checked {
			color: $color-primary;
		}
	}
	
	.pay-box {
		box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
		height: 100rpx;
	}
	
	.modal-content {
		.change-address-btn {
			line-height: 2;
			padding: 0 1em;
		}
		.pay_btn {
			width: 100%;
			border-radius: 50rem !important;
			line-height: 3;
		}
	}
</style>
